import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
import SearchBar from "../searchbar/index"
import "./index.css"
import axios from "../../utils/axios"

class index extends Component {
    state = {
        product_left_list : [],   //左边盒子数据
        product_right_list : [],  //右边盒子数据
        selectIdnex : 0,         //标签对应的索引
    }
    
    //利用冒泡机制获取左边盒子标签的索引
    Bubble = (e) => {
        let SeInd = parseInt(e.target.getAttribute("select-index"))
        this.setState({
            selectIdnex : SeInd,
            product_right_list : this.state.product_left_list[SeInd].children
        })
    }
    
    //利用冒泡机制添加右边盒子商品列表的点击事件
    HPItemClick = (e) => {
        let cd =  parseInt(e.target.getAttribute("data_index"))
        this.props.history.push("/goodlist/" + cd)
    }
    
    // 获取列表商品数据
    GetData = (params) => {
        axios.get("categories").then(res => {
            this.SetData(res)
            }).catch(err => {console.log(err)})
    }

    // 设置商品数据,通过WhetherToCache判断是否已经缓存
    SetData = (res,WhetherToCache) => {
        let CacheData = {}
        // 如果已经缓存，直接获取
        if(WhetherToCache){
            CacheData = JSON.parse(localStorage.getItem("CacheData"))
        }else{
            //否则使用localStorage缓存请求的数据
            CacheData = {data:Date.now(),Cache_data:res}
        }

        localStorage.setItem("CacheData",JSON.stringify(CacheData))
        //设置到state中
        this.setState({
            product_left_list : res,
            product_right_list : res[0].children
        })
    }

    componentDidMount(){
       // 获取localStorage缓存数据
       let CacheData = localStorage.getItem("CacheData")
       // 判断，如果不为空，说明没有过期或者以缓存数据
       if(CacheData){
           let NowTime = Date.now()  //当前时间
           let CacheTime = JSON.parse(CacheData).data  //缓存时间
           // 判断是否过期，1小时后过期
           if(NowTime - CacheTime > 60*60*1000){
               //  如果过期
               this.GetData()
           }else{
               //  如果没有过期
               this.SetData(JSON.parse(CacheData).Cache_data,true)
           }
       //为空，则商品列表请求数据
       }else{
            this.GetData()  //设置第二个参数，true代表已经缓存的数据
       }
    }

    render() {
        return (
             <section>
                 {/* 搜索框 */}
                 <SearchBar></SearchBar>

                 {/* 商品列表 */}
                 <div className="ProductList">
                     {/* 左边盒子 */}
                    <div className="PList_left" onClick={this.Bubble}>
                         {this.state.product_left_list.map( (val,index) => {
                             return <div select-index={index} key={val.cat_id} 
                                     className={this.state.selectIdnex === index ? "active" : ''}>
                                        {val.cat_name}
                                    </div>
                         })}
                    </div>
                    {/* 右边盒子 */}
                    <div className="PListright">
                        {this.state.product_right_list.map( (val,index) => {
                           return (<div className="PLRight_item" key={val.cat_id}>
                                       {/* 二级标题 */}
                                       <div className="PLR_title">{"/"}{val.cat_name}{"/"}</div>
                                       {/* 产品列表 */}
                                       <div className="PLR_List" onClick={this.HPItemClick}>
                                           {val.children&&val.children.map( v => {
                                               return (<div className="product_list" key={v.cat_id} data_index={v.cat_id}>
                                                           {/* 图片 */}
                                                           <div className="Image"><img src={v.cat_icon} alt="" data_index={v.cat_id}></img></div>
                                                           {/* 产品名字 */}
                                                           <div className="item_title">{v.cat_name}</div>
                                                      </div>)
                                           })}
                                       </div>
                                   </div>)
                        })}
                    </div>
                 </div>

             </section>
        )
    }
}

export default withRouter(index)